import { Card, Form, InputNumber } from "antd";
import moment from "moment";
import { useEffect, useState } from "react";

function TimestampPanle() {
    const now = moment();

    const [year, setYear] = useState(now.year());
    const [month, setMonth] = useState(now.month() + 1);
    const [day, setDay] = useState(now.date());
    const [hour, setHour] = useState(now.hour());
    const [minute, setMinute] = useState(now.minute());
    const [second, setSecond] = useState(now.second());
    const [stampValue, setStampValue] = useState(now.valueOf());

    useEffect(() => {
        const timeStr = `${year}-${month < 10 ? "0" : ""}${month}-${day < 10 ? "0" : ""}${day} ${hour < 10 ? "0" : ""}${hour}:${minute < 10 ? "0" : ""}${minute}:${second < 10 ? "0" : ""}${second}`;
        const t = moment(timeStr, "YYYY-MM-DD HH:mm:ss");
        const ts = t.valueOf();
        if (ts != stampValue) {
            setStampValue(ts);
        }
    }, [year, month, day, hour, minute, second]);

    useEffect(() => {
        const t = moment(stampValue);
        if (t.year() != year) {
            setYear(t.year());
        }
        if (t.month() + 1 != month) {
            setMonth(t.month() + 1);
        }
        if (t.date() != day) {
            setDay(t.date())
        }
        if (t.hour() != hour) {
            setHour(t.hour());
        }
        if (t.minute() != minute) {
            setMinute(t.minute());
        }
        if (t.second() != second) {
            setSecond(t.second());
        }
    }, [stampValue]);

    return (
        <Card title="时间戳转换">
            <Form>
                <Form.Item label="日期">
                    <InputNumber controls={false} min={0} value={year} style={{ width: "60px" }} precision={0} onChange={value => {
                        if (value != null) {
                            setYear(value);
                        }
                    }} />
                    年
                    <InputNumber controls={false} min={1} max={12} value={month} style={{ width: "40px" }} precision={0} onChange={value => {
                        if (value != null) {
                            setMonth(value);
                        }
                    }} />
                    月
                    <InputNumber controls={false} min={1} max={31} value={day} style={{ width: "40px" }} precision={0} onChange={value => {
                        if (value != null) {
                            setDay(value);
                        }
                    }} />
                    日
                    <InputNumber controls={false} min={0} max={23} value={hour} style={{ width: "40px" }} precision={0} onChange={value => {
                        if (value != null) {
                            setHour(value);
                        }
                    }} />
                    时
                    <InputNumber controls={false} min={0} max={59} value={minute} style={{ width: "40px" }} precision={0} onChange={value => {
                        if (value != null) {
                            setMinute(value);
                        }
                    }} />
                    分
                    <InputNumber controls={false} min={0} max={59} value={second} style={{ width: "40px" }} precision={0} onChange={value => {
                        if (value != null) {
                            setSecond(value);
                        }
                    }} />
                    秒
                </Form.Item>
                <Form.Item label="时间戳">
                    <InputNumber precision={0} value={stampValue} style={{ width: "200px" }} controls={false} addonAfter="毫秒" onChange={value => {
                        if (value != null) {
                            setStampValue(value);
                        }
                    }} />
                </Form.Item>
            </Form>
        </Card>);
}

export default TimestampPanle;